<template>
	<view class="content">
		<u-modal
			v-model="addrShow"
			confirm-color="#1A1A1A"
			@confirm="confirm"
			:mask-close-able="true"
			show-title="false"
			z-index="9999999"
			negative-top="20"
		>
			<view class="slot-content" style="padding: 50rpx 100rpx;">
				<input type="text" value="" v-model="carAdd" placeholder="请输入用车地址" focus />
			</view>
		</u-modal>
		<u-modal
			v-model="addrShow2"
			confirm-color="#1A1A1A"
			@confirm="confirm2"
			:mask-close-able="true"
			show-title="false"
			z-index="9999999"
			negative-top="20"
		>
			<view class="slot-content" style="padding: 50rpx 100rpx;">
				<input type="text" value="" v-model="retAdd" placeholder="请输入用车地址" focus />
			</view>
		</u-modal>

		<view class="info">
			<view class="digitalAmt">￥ {{ data.price }}</view>
			<view class="image" @click="preview(data.picture)"><image :src="data.picture" mode="aspectFill"></image></view>
			<view class="right">
				<text class="text">{{ data.name }}</text>
				<view class="text1">
					<text v-if="data.plate">{{ data.plate | hide }}</text>
					<text>{{ data.traffic }}</text>
				</view>
				<view class="text2">
					我总在意流云与星群的坐标，一朵花开谢的时日，原野与平川一望无垠是否平展。哪知你轻轻抬起眉梢，竟赐予我一生大好河山。
				</view>
			</view>
		</view>
		<view class="list">
			<view class="listTime" v-if="status == 0 || status == 2"  >
				订单已锁定请支付：
				<text v-if="timestamp11">{{ timestamp11 | capitalize }}</text>
				<u-count-down
					v-else
					separator-size="36"
					font-size="36"
					ref="uCountDown"
					autoplay="false"
					:timestamp="timestamp"
					:separator="zh"
					:bg-color="transparent"
					separator-color="#fff"
					color="#fff"
				></u-count-down>
			</view>
			
			
			<view class="listTime"  v-else  style="color: red;">
				订单已完成：
				<text v-if="timestamp11">{{ timestamp11 | capitalize }}</text>
				<u-count-down
					v-else
					separator-size="36"
					font-size="36"
					ref="uCountDown"
					autoplay="false"
					:timestamp="timestamp"
					:separator="zh"
					:bg-color="transparent"
					separator-color="#fff"
					color="#fff"
				></u-count-down>
			</view>
			
			
			
			
			
			
			
			
			
			<!-- v-if="status == 8 || status == 7 || status == 4 || status == 1" -->
			
			
	
				<view class="list1" >
					<view class="box22" @click="getMap(1)">
						<text>用车地址</text>
						<text v-if="carAdd" class="text1">{{ carAdd }}</text>
						<text v-else class="text2">请输入地址</text>
					</view>
					<view class="box33" @click="getMap(0)">
						<text>还车地址</text>
						<text v-if="retAdd" class="text1">{{ retAdd }}</text>
						<text v-else class="text2">请输入地址</text>
					</view>
				</view>
					
			
			
			
			
			
			
			
			
			
			
	
			
			
			
			<view class="list2">
				<view class="henxian"></view>
				<view class="intermediateDays">{{ data.day == '共0天' ? '共1天' : data.day }}</view>
				<view class="data">
					<text>用车时间</text>
					<text>{{ data.stare_time }}</text>
					<text>{{ data.stare_week }} {{ data.stare_hour }}</text>
				</view>
				<view class="data1">
					<text>还车时间</text>
					<text>{{ data.end_time }}</text>
					<text>{{ data.end_week }} {{ data.end_hour }}</text>
				</view>
			</view>

			<view class="list22" style="padding-bottom: 26rpx;">
				<u-radio-group v-model="value" wrap @change="radioGroupChange">
					<u-radio
						@change="radioChange"
						v-for="(item, index) in list"
						:key="index"
						:name="item.name"
						:disabled="item.disabled"
						shape="square"
						active-color="#880000"
					>
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view>

			<view v-for="(item, index) in 1" :key="index">
				<view class="lsit3" @click="couponJump">
					<view class="left">
						<text>优惠券</text>
						<image src="../../../static/home/youhuiquan.png" mode=""></image>
					</view>
					<view class="right">
						<text>-￥{{ data.coupons }}</text>
						<text style="margin-left: 20rpx; font-size: 31rpx;">></text>
					</view>
				</view>
			</view>
			<!-- <view class="lsit3">
				<view class="left" style="color: #dcdcdc;">请输入优惠券数量</view>

				<u-input
					v-model="numOfCoupons"
					:type="textarea"
					placeholder="请输入"
					@blur="quantityChg"
					placeholder-class="inputStyle"
					:clearable="fasle"
				/>
			</view> -->
		</view>

		<view class="detlbox ">
			<view class="info1 f a-c j-f">费用明细</view>
			<view class="info2 f j-b a-c">
				<text>车辆租金 :</text>
				<text class="t-price">{{ data.cost.rent }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>车辆押金 :</text>
				<text class="t-price">{{ data.cost.deposit }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>违章押金 :</text>
				<text class="t-price">{{ data.cost.illegal }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>增值费用 :</text>
				<text class="t-price">{{ data.cost.cost }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>合计 :</text>
				<text class="t-price">{{ data.money }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>定金 :</text>
				<text class="t-price">{{ data.deposit }}</text>
			</view>
		</view>
		<!-- 送车拍照 -->
		<view class="deliveryCarPhotos" v-if="data.send[0]">
			<view class="head">
				<text class="text">送车照片</text>
				<text class="text1">{{ data.time_take }}</text>
			</view>
			<view class="henxian"></view>

			<view class="box" @click="deliveryCarImg(data.send)">
				<view class="image"><image :src="data.send[0]" mode="aspectFill"></image></view>
				<view class="image1"><image :src="data.send[1]" mode="aspectFill"></image></view>
			</view>
		</view>
		<!-- 还车拍照 -->
		<view class="chgCarPhotos" v-if="data.also_img[0]">
			<view class="head">
				<text class="text">还车照片</text>
				<text class="text1">{{ data.time_also }}</text>
			</view>
			<view class="henxian"></view>
			<view class="box" @click="retTheCarImg(data.also_img)">
				<view class="image"><image :src="data.also_img[0]" mode="aspectFill"></image></view>
				<view class="image1"><image :src="data.also_img[1]" mode="aspectFill"></image></view>
			</view>
		</view>
		<!-- 去付款 -->
		<view class="submitOrdr" v-if="status == 0 || status == 2">
			<view class="left">
				<view class="submitOrdr1">
					<text>定金 ￥{{ data.deposit }}</text>
					<text>已优惠 ￥{{ data.coupons }}</text>
				</view>
			</view>

			<view class="right" @click="submitOrdr">去付款</view>
		</view>

		<!-- 送车中 -->
		<view class="submitOrdr" v-if="status == 5">
			<view class="left" @click="erlyRfnd">
				<view class="submitOrdr1">
					<text>{{ cancel }}</text>
				</view>
			</view>

			<view class="right" @click="text">送车中</view>
		</view>
		<!-- 还车中 -->
		<view class="submitOrdr" v-if="status == 6">
			<view class="left" @click="erlyRfnd">
				<view class="submitOrdr1">
					<text>{{ cancel }}</text>
				</view>
			</view>
			<view class="right" @click="text">还车中</view>
		</view>
		<!-- 租用中 -->
		<!-- <view class="renting" v-if="status == 7">租用中</view> -->
		<!--  v-if="status==1 || status == 7" -->
		<!-- <view class="renting" @click="retTheCarErly">提前还车</view> -->
		<view class="renting red" @click="retTheCarErly" v-if="status == 8 || status == 7 || status == 4 || status == 1">提前还车</view>
		<view class="renting red" v-if="status == 8 || status == 7 || status == 4 || status == 1" @click="vehBreakdown">车辆故障</view>

		<view class="renting red" v-if="status == 8 || status == 7 || status == 4 || status == 1" @click="rnwlApp">续租申请</view>
		<!-- <view class="renting" @click="rnwlApp">续租申请</view> -->

		<u-popup v-model="isRetCar" mode="center" border-radius="14" width="550rpx" closeable @>
			<view class="retcatBox">
				<view class="huanche"><text class="text">提前还车</text></view>
				<view class="info111"><text class="text1">提前还车需要注意以下事项</text></view>
				<view class="zhuyi">
					<text>• 不会退还租金，价格仍以原先约定价格计算</text>
					<text>• 客服会联系您，需要您提供还车地址</text>
				</view>
				<view class="tongyi">
					同意
					<text style="color: #0079FE;" @click="protocol(1)">《用户授权协议》</text>
					<text style="color: #0079FE;" @click="protocol(2)">《用户服务协议》</text>
				</view>
				<view class="btn" @click="confirmAuthorization"><text>确认授权</text></view>
			</view>
		</u-popup>

		<!-- 订单结束 -->
		<view class="submitOrdr" v-if="status == 9">
			<view class="end"></view>
			<view class="left">
				<view class="text"><text>订单结束</text></view>
			</view>
			<view class="right"></view>
		</view>
		<u-modal v-model="dpstShow" :show-cancel-button="true" :content="content" @confirm="rfndOfDpst" @cancel="cancelDpst"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dpstShow: false,
			content: '定金:6666',
			flg: '',
			numOfCoupons: 0,
			status: '',
			addrShow: false,
			addrShow2: false,
			oid: '', // 订单id
			show: false,
			data: {},
			couponPrc: '',
			couponData: {},
			carAdd: '', //用车地址
			retAdd: '', // 还车地址
			list: [
				{
					name: '送车上门',
					disabled: false,
				},
				{
					name: '到店取车',
					disabled: false,
				},
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '',

			timestamp: '',
			timestamp11: '',
			isRetCar: false,
			cancel: '取消订单',
		};
	},
	onShow() {
		this.isRetCar = false
		this.numOfCoupons = this.couponData.number;
		this.upd();
		this.getOrdrDetails();
	},
	onLoad(oid) {
		this.uid = getApp().globalData.uid;
		this.oid = oid.oid; // 订单id

		this.getOrdrDetails();
	},
	methods: {
		preview(e){
		
			uni.previewImage({
				urls: [e],
				longPressActions: {
					 // itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		//deliveryCarImg  retTheCarImg
		deliveryCarImg(e) {
			
			uni.previewImage({
				urls: e,
				longPressActions: {
					 itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		retTheCarImg(e) {
			uni.previewImage({
				urls: e,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},

		async getMap(id) {
			if (id) {
				const res = await uni.chooseLocation();
				this.carAdd = res[1].address;
				this.upd();
				console.log('res', res);
			} else {
				const res = await uni.chooseLocation();
				this.retAdd = res[1].address;
				console.log('res', res);
				this.upd();
			}
		},

		protocol(id) {
			uni.navigateTo({
				url: '../protocol/protocol?id' + id,
			});
		},
		async rnwlApp() {
			// this.data.cid
			let obj = {
				id: this.data.vid,
				agent: 0,
			};
			uni.navigateTo({
				url: '../../garage/garageDetails/garageDetails?obj=' + JSON.stringify(obj),
			});
			uni.setStorageSync('yy', 1);
			uni.setStorageSync('yy1', this.oid);
			console.log('res >>  ', res);
		},
		//提前退款
		erlyRfnd() {
			if (this.cancel == '取消订单') {
				this.cancel = '确认退款';
			} else {
				this.content = `退还金额 : ¥ ${this.data.deposit}`;
				this.dpstShow = true;
			}
		},
		async rfndOfDpst() {
			const res = await this.$u.post('api/car/car_pay_refund', {
				uid: uni.getStorageSync('uid'),
				oid: this.oid,
			});
			uni.$showMsg(res.msg);
		},
		cancelDpst() {
			this.dpstShow = false;
		},
		//车辆故障
		vehBreakdown() {
			uni.navigateTo({
				url: '../malfunction/malfunction?oid=' + this.oid,
			});
		},
		// 确认授权-- 提前还车
		async confirmAuthorization() {
			uni.navigateTo({
				url: '../retTheCarErly/retTheCarErly?oid=' + this.oid,
			});
		},
		//提前还车
		retTheCarErly() {
			this.isRetCar = true;
		},
		radioChange(e) {
			console.log('e1 :>> ', e);
			this.value = e;
			this.upd();
		},

		radioGroupChange(e) {
			console.log('e2 :>> ', e);
		},
		confirm() {
			// this.updOrdr();
		},
		confirm2() {
			// this.updOrdr();
		},
		carAddr() {
			this.addrShow = true;
			this.upd();
		},
		carAddr2() {
			this.addrShow2 = true;
			this.upd();
		},
		//获取订单详情
		async getOrdrDetails() {
			const res = await this.$u.post('api/car/car_order_details', {
				oid: this.oid, // 订单
			});
			console.log('获取订单详情 >>  ', res);
			if (!res.code) return uni.$showMsg();
			this.data = res.data;
			this.status = res.data.status;
			this.carAdd = res.data.car_take;
			this.retAdd = res.data.car_also;
			//this.numOfCoupons = res.data.yh_num;
			this.value = res.data.alse_type;

			var tiem = res.data.car_time.split(',');
			console.log('tiem :>> ', tiem);
			if (Number(+new Date() / 1000).toFixed() < tiem[0]) {
				
				this.timestamp11 = (Number(tiem[1]) - Number(tiem[0])) * 1000; // 格式MS
				console.log('this.timestamp11 :>> ', this.timestamp11);
			} else {
				
				this.timestamp = Number(tiem[1]) - Number(+new Date() / 1000).toFixed(); //格式 S
				console.log('this.timestamp :>> ', this.timestamp);
				this.$refs.uCountDown.start();
			}
		},

		async submitOrdr() {
			// if (!this.carAdd) return uni.$showMsg('请输入用车地址');
			if (!this.value) return uni.$showMsg('请选择提车的方式');
			this.upd();
			uni.navigateTo({
				url: '../payOrdr/payOrdr?oid=' + this.oid,
			});
		},
		async upd() {
			console.log('this.value----------------------- :>> ', this.value);
			const res = await this.$u.post('api/car/car_order_add', {
				oid: this.oid, //订单id
				car_take: this.carAdd, //取车地址
				car_also: this.retAdd, //还车地址
				also_type: this.value, //还车方式
				hid: [this.couponData.id, this.couponData.number], //用户优惠券id 数组
			});
			console.log('更新下单数据 :>> ', res);
		},
		// input
		quantityChg() {
			console.warn(' jinru :>> ');
			this.upd();
			this.getOrdrDetails();
		},

		// 跳转优惠券
		couponJump() {
			uni.navigateTo({
				url: '../../my/coupon/coupon',
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	padding: 24rpx 20rpx;
	background-color: #000000;
	padding-bottom: 150rpx;
	/deep/ .u-input__input {
		text-align: right;
		padding-right: 20rpx;
		width: 150rpx;
		color: #ffffff !important;
	}
	.u-radio {
		height: 100rpx !important;
	}
	.red {
		color: red !important;
	}
	.slot-content {
		margin: 0 auto;
	}
	.retcatBox {
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		.huanche {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 150rpx;
			background-color: #0099ff;
			.text {
				font-weight: 500;
				color: #ffffff;
				font-size: 40rpx;
			}
		}
		.info111 {
			background-color: #ffffff;
			.text1 {
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				height: 100rpx;
				font-size: 30rpx;
				border-bottom: 1rpx solid #cccccc;
			}
		}
		.zhuyi {
			height: 120rpx;
			border-bottom: 1rpx solid #cccccc;
			justify-content: space-around;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			text {
				padding: 0 20rpx;
				font-size: 25rpx;
			}
		}
		.tongyi {
			height: 80rpx;
			line-height: 80rpx;
			align-items: 80rpx;
			padding: 0 20rpx;
		}
		.btn {
			height: 80rpx;
			padding: 0 20rpx;
			text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				background-color: #0099ff;
				font-weight: 500;
				color: #ffffff;
				font-size: 40rpx;
			}
		}
	}

	.info {
		width: 710rpx;
		height: 231rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin: 0 auto;
		padding: 16rpx;
		display: flex;
		position: relative;
		.digitalAmt {
			position: absolute;
			right: 32rpx;
			bottom: 29rpx;

			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #d60000;
		}

		.image {
			width: 214rpx;
			height: 198rpx;
			border-radius: 10rpx;
			image {
				width: 214rpx;
				height: 198rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			margin-left: 25rpx;
			.text {
				height: 36rpx;
				font-size: 38rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #fdfdfd;
				line-height: 36rpx;
			}
			.text1 {
				margin-top: 20rpx;
				text {
					display: inline-block;
					padding: 4rpx 17rpx;
					//line-height: 31rpx;
					text-align: center;
					background: #dcdcdc;
					border-radius: 16rpx;
					margin-right: 10rpx;

					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #1e2024;
				}
			}
			.text2 {
				width: 230rpx;
				height: 54rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				line-height: 26rpx;
				//
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-top: 22rpx;
				//
			}
		}
	}
	.list {
		width: 710rpx;
		//height: 630rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin-top: 25rpx;

		padding: 0 36rpx 36rpx;
		.listTime {
			//width: 483px;
			height: 93rpx;
			text-align: center;

			line-height: 93rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-bottom: 1rpx solid #737373;
		}
		.list1 {
			height: 144rpx;
			border-bottom: 1rpx solid #737373;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.box22 {
				// flex: 1;
				width: 200rpx;
				margin-left: 15rpx;
			}
			.box33 {
				width: 220rpx;
				// flex: 1;
			}

			.box22,
			.box33 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text:nth-child(1) {
					height: 21rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 21rpx;
					margin-bottom: 21rpx;
				}
				.text1 {
					//height: 75rpx;
					//line-height: 75rpx;
					font-size: 25rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;

					//white-space: nowrap; /* 不换行 */

					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.text2 {
					color: #737373;
					font-size: 25rpx;
				}
			}
		}
		.list2 {
			position: relative;
			height: 205rpx;
			border-bottom: 1rpx solid #737373;
			display: flex;
			justify-content: space-between;
			.henxian {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 275rpx;

				border-bottom: 1rpx solid #737373;
				border-radius: 0.05rpx;
			}
			.intermediateDays {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80rpx;
				height: 21rpx;
				line-height: 21rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				line-height: 21rpx;
				background-color: #2a2929;
				// z-index: 33;
			}
			.data {
				margin-left: 15rpx;
			}
			.data1 {
				margin-right: 15rpx;
			}
			.data1,
			.data {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text:nth-child(1) {
					height: 21rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 21rpx;
				}
				text:nth-child(2) {
					height: 30rpx;
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 30rpx;
					margin: 18rpx 0 32rpx 0;
				}
				text:nth-child(3) {
					height: 20rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #737373;
					line-height: 20rpx;
				}
			}
		}
		.list22 {
			//width: 710rpx;
			//height: 447rpx;
			margin: 0 auto;
			//margin-top: 20rpx;
			background: #2a2929;
			border-radius: 15rpx;
			.list1 {
				height: 88rpx;
				padding: 26rpx 16rpx;

				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;

				border-bottom: 1rpx solid #737373;
			}
			/deep/.u-radio {
				//width: 500rpx !important;
				height: 82rpx !important;
				// padding: 0 17rpx;
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				border-bottom: 1rpx solid #737373;
			}
			// /deep/.u-radio__label {
			// 	margin:  0  17rpx !important;
			// }
			/deep/.u-radio__icon-wrap {
				margin-right: 16rpx;
			}
			/deep/ .u-radio__label {
				width: 100%;
				margin: 0 17rpx !important;
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				// line-height: 25rpx;
			}
		}
		.lsit3 {
			height: 79rpx;
			padding: 28rpx 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #737373;
			.left {
				height: 23rpx;
				align-items: center;
				display: flex;
				text {
					height: 24rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 24rpx;
				}
				image {
					width: 28rpx;
					height: 24rpx;
					margin-left: 10rpx;
					vertical-align: bottom;
				}
			}
			input {
				color: #ffffff;
			}
			.right {
				text {
					height: 24rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 24rpx;
				}
			}
		}
	}

	.detlbox {
		background-color: #2a2929;
		padding: 30rpx 21rpx;
		margin-top: 25rpx;
		border-radius: 15rpx;
		.info1 {
			height: 100rpx;

			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			//border-bottom: 1rpx solid #737373;
		}
		.info2 {
			height: 60rpx;
			text:nth-child(1) {
				height: 28rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			text:nth-child(2) {
				height: 23rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #d60000;
			}
		}
	}
	.deliveryCarPhotos,
	.chgCarPhotos {
		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 34rpx;
			.text {
				height: 34rpx;
				line-height: 34rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
			.text1 {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.henxian {
			width: 670rpx;
			height: 2rpx;
			background: #6e6e6e;
			margin-top: 30rpx;
		}
		.box {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			.image,
			.image1 {
				width: 320rpx;
				height: 200rpx;
				background-color: #2a2929;
				//background-color: red;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.deliveryCarPhotos,
	.chgCarPhotos {
		width: 710rpx;
		height: 346rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin-top: 25rpx;
		padding: 30rpx 22rpx;
	}
	.renting {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 710rpx;
		height: 100rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #2a2929;
		border-radius: 10rpx;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.submitOrdr {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 131.5rpx;

		display: flex;

		.left {
			width: 516rpx;
			background: #880000;
			display: flex;
			justify-content: space-between;
			.submitOrdr1,
			.submitOrdr2 {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.submitOrdr1 {
				margin-left: 57rpx;
				text:nth-child(1) {
					height: 38rpx;
					font-size: 41rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 38rpx;
					margin-bottom: 15rpx;
				}
				text:nth-child(2) {
					height: 26rpx;
					font-size: 27rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 26rpx;
				}
			}
			.submitOrdr2 {
				align-items: center;
				margin-right: 53rpx;

				text:nth-child(1) {
					height: 28rpx;
					font-size: 29rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 28rpx;
				}
				text:nth-child(2) {
					height: 28rpx;
					font-size: 29rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 28rpx;
				}
			}
		}
		.right {
			width: 31.21%;
			background: #dcdcdc;

			font-size: 38rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #880000;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
